<template>
	<div class="home">
		</a-layout-sider>
		<a-layout style="padding: 0 24px 24px">
			<a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
				<div>
					<a-input-search placeholder="name" enter-button v-model="seachText" @search="onSearch" />
				</div>
				<a-input-search placeholder="Tel" enter-button="Search" size="large" v-model="Tel" @search="onSearchTel" />
				<p @click="jiasort" :class="{'aa':paixu == 2}">zzz</p>
				<p @click="chongzhi">reset</p>
				<a-table :columns="columns" :data-source="showList" :pagination="{ pageSize: 5, total:showList.length }"
				 :rowKey="(record,index)=>{return index}"
				>
					<template slot="avatar" slot-scope="props">
						<img :src="props" :style="{width:'50px',height:'50px'}" />
					</template>
					<template slot="action" slot-scope="text,record">
						<a-button type="danger" shape="circle" icon="delete" @click="onClickDelete(record)" />
					</template>
					<template slot="created_at" slot-scope="props">
						<span>{{props | timeFilter}}</span>
					</template>
				</a-table>
			</a-layout-content>
		</a-layout>
		</a-layout>
		</a-layout>
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		name: 'Home',
		components: {

		},
		filters: {
			timeFilter: function(value) {
				var date = new Date(value * 1000).toLocaleString();
				return date;
			}
		},
		data() {
			return {
				userList: [],
				showList: [],
				seachText: "",
				paixu: 2,
				Tel: '',
				columns: [{
						title: 'ID',
						dataIndex: 'uid',
						width: 80,
					},
					{
						title: 'Name',
						dataIndex: 'nickname'
					},
					{
						title: 'Img',
						dataIndex: 'avatar',
						scopedSlots: {
							customRender: 'avatar'
						}
					},
					{
						title: 'Tel',
						dataIndex: 'mobile',
					},
					{
						title: 'Time',
						dataIndex: 'created_at',
						scopedSlots: {
							customRender: 'created_at'
						}
					},
					{
						title: 'Status',
						dataIndex: 'status',
					},
					{
						title: 'Setting',
						dataIndex: "action",
						scopedSlots: {
							customRender: 'action'
						}
					}
				]
			}
		},
		methods: {
			onSearch() {
				console.log(this.seachText);
				this.showList = [];
				this.userList.forEach(element => {
					if (element.nickname.includes(this.seachText)) {
						this.showList.push(element)
					}
				});
			},
			onSearchTel() {
				this.showList = [];
				this.userList.forEach(element => {
					if (element.mobile.includes(this.Tel)) {
						this.showList.push(element)
					}
				});
			},
			onClickDelete(props) {
				console.log(props);
				var index = this.showList.findIndex((element) => {
					return element.uid === props.uid
				});

				if (index != -1) {
					this.showList.splice(index, 1)
				}

				var index1 = this.userList.findIndex((element) => {
					return element.uid === props.uid
				});

				if (index1 != -1) {
					this.userList.splice(index1, 1)
				}
			},
			jiasort() {
				if (this.paixu == 2) {
					this.paixu = 3;
					this.showList.sort((a, b) => {
						return a.created_at - b.created_at
					})
					console.log(this.paixu)
				} else if (this.paixu != 2) {
					this.paixu = 2;
					console.log(this.paixu)
					this.showList.sort((a, b) => {
						return b.created_at - a.created_at
					})
				}
			},
			chongzhi(){
				axios.get("http://localhost:8080/list.json").then((res) => {
					console.log(res)
					this.userList = res.data;
					this.showList = res.data;
				})
			}
		},
		mounted() {
			axios.get("http://localhost:8080/list.json").then((res) => {
				console.log(res)
				this.userList = res.data;
				this.showList = res.data;
			})
		}
	}
</script>
